<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>web打印，一篇搞定 | 俊劫的学习基地</title>
    <meta name="generator" content="VuePress 1.7.1">
    <link rel="icon" href="/favicon.ico">
    <meta name="description" content="俊劫的学习基地是俊劫的个人博客，用于记录学习笔记、分享音乐、书籍、旅行等个人兴趣的站点。">
    <meta name="keywords" content="俊劫,俊劫的博客,博客,个人博客,vue,vuejs,vuepress,vuepress-theme-reco">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    
    <link rel="preload" href="/assets/css/0.styles.5f3e1891.css" as="style"><link rel="preload" href="/assets/js/app.070ad525.js" as="script"><link rel="preload" href="/assets/js/2.1d15da37.js" as="script"><link rel="preload" href="/assets/js/67.2f070f74.js" as="script"><link rel="preload" href="/assets/js/4.aab0e518.js" as="script"><link rel="prefetch" href="/assets/js/10.46adc9c3.js"><link rel="prefetch" href="/assets/js/11.4fa3a97f.js"><link rel="prefetch" href="/assets/js/12.d930e0cf.js"><link rel="prefetch" href="/assets/js/13.ac14e905.js"><link rel="prefetch" href="/assets/js/14.5db5f3a5.js"><link rel="prefetch" href="/assets/js/15.f912d397.js"><link rel="prefetch" href="/assets/js/16.dc881375.js"><link rel="prefetch" href="/assets/js/17.4b5e68db.js"><link rel="prefetch" href="/assets/js/18.e48da6e4.js"><link rel="prefetch" href="/assets/js/19.4a02bf41.js"><link rel="prefetch" href="/assets/js/20.8437ea4c.js"><link rel="prefetch" href="/assets/js/21.618c8e36.js"><link rel="prefetch" href="/assets/js/22.097f8d74.js"><link rel="prefetch" href="/assets/js/23.512dda35.js"><link rel="prefetch" href="/assets/js/24.2afceb8f.js"><link rel="prefetch" href="/assets/js/25.a7a02005.js"><link rel="prefetch" href="/assets/js/26.a79e1590.js"><link rel="prefetch" href="/assets/js/27.d0feb2c1.js"><link rel="prefetch" href="/assets/js/28.62b630e3.js"><link rel="prefetch" href="/assets/js/29.119f3256.js"><link rel="prefetch" href="/assets/js/3.8b40c051.js"><link rel="prefetch" href="/assets/js/30.5b11ce87.js"><link rel="prefetch" href="/assets/js/31.94ce824a.js"><link rel="prefetch" href="/assets/js/32.ed4f7508.js"><link rel="prefetch" href="/assets/js/33.c74281cf.js"><link rel="prefetch" href="/assets/js/34.ffb262b0.js"><link rel="prefetch" href="/assets/js/35.ada11000.js"><link rel="prefetch" href="/assets/js/36.edb96889.js"><link rel="prefetch" href="/assets/js/37.02fd03c3.js"><link rel="prefetch" href="/assets/js/38.4e0ec907.js"><link rel="prefetch" href="/assets/js/39.8cd27589.js"><link rel="prefetch" href="/assets/js/40.e59f0b3b.js"><link rel="prefetch" href="/assets/js/41.e3da8313.js"><link rel="prefetch" href="/assets/js/42.c847d1f4.js"><link rel="prefetch" href="/assets/js/43.13c84445.js"><link rel="prefetch" href="/assets/js/44.cbaa9acf.js"><link rel="prefetch" href="/assets/js/45.cb3a266d.js"><link rel="prefetch" href="/assets/js/46.0519c642.js"><link rel="prefetch" href="/assets/js/47.3373a57e.js"><link rel="prefetch" href="/assets/js/48.7efa5760.js"><link rel="prefetch" href="/assets/js/49.923721c8.js"><link rel="prefetch" href="/assets/js/5.07f41da3.js"><link rel="prefetch" href="/assets/js/50.839ac91d.js"><link rel="prefetch" href="/assets/js/51.f98cecb2.js"><link rel="prefetch" href="/assets/js/52.041f20b3.js"><link rel="prefetch" href="/assets/js/53.9464df60.js"><link rel="prefetch" href="/assets/js/54.a9ce67d2.js"><link rel="prefetch" href="/assets/js/55.9733d4b3.js"><link rel="prefetch" href="/assets/js/56.e67c1aa1.js"><link rel="prefetch" href="/assets/js/57.1335a8a7.js"><link rel="prefetch" href="/assets/js/58.83f617d8.js"><link rel="prefetch" href="/assets/js/59.b74c2845.js"><link rel="prefetch" href="/assets/js/6.dcf50b6e.js"><link rel="prefetch" href="/assets/js/60.6e3b00bd.js"><link rel="prefetch" href="/assets/js/61.cd335db9.js"><link rel="prefetch" href="/assets/js/62.ee277d48.js"><link rel="prefetch" href="/assets/js/63.2a34cfa5.js"><link rel="prefetch" href="/assets/js/64.a51989fe.js"><link rel="prefetch" href="/assets/js/65.3abfaea5.js"><link rel="prefetch" href="/assets/js/66.d4f35c55.js"><link rel="prefetch" href="/assets/js/68.c7da856f.js"><link rel="prefetch" href="/assets/js/69.6c15fcd4.js"><link rel="prefetch" href="/assets/js/7.10c46d97.js"><link rel="prefetch" href="/assets/js/70.68b6cf93.js"><link rel="prefetch" href="/assets/js/71.c49db210.js"><link rel="prefetch" href="/assets/js/72.7ffae8af.js"><link rel="prefetch" href="/assets/js/73.abb40ede.js"><link rel="prefetch" href="/assets/js/74.71723883.js"><link rel="prefetch" href="/assets/js/75.ab7e2e75.js"><link rel="prefetch" href="/assets/js/76.936112a6.js"><link rel="prefetch" href="/assets/js/8.ec9c3735.js"><link rel="prefetch" href="/assets/js/9.b555605d.js">
    <link rel="stylesheet" href="/assets/css/0.styles.5f3e1891.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container have-rightmenu" data-v-f848d4e8><div class="global-loading-wrapper" data-v-2c41f3eb data-v-f848d4e8 data-v-f848d4e8><div class="loader-main" data-v-2c41f3eb><img src="/assets/img/loading.a592e2e5.jpg" alt="loading" data-v-2c41f3eb></div></div> <div class="hide" data-v-f848d4e8><header class="navbar" data-v-f848d4e8><div title="目录" class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><img src="/img/logo.png" alt="俊劫的学习基地" class="logo"> <span class="site-name">俊劫的学习基地</span></a> <div class="links"><div class="color-picker"><a class="color-button"><i class="iconfont reco-color"></i></a> <div class="color-picker-menu" style="display:none;"><div class="mode-options"><h4 class="title">选择模式</h4> <ul class="color-mode-options"><li class="dark">深色模式</li><li class="light active">浅色模式</li><li class="read">阅读模式</li></ul></div></div></div> <div class="search-box"><i class="iconfont reco-search"></i> <input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <ul class="suggestions" style="display:none;"></ul></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/" class="nav-link"><i class="iconfont reco-home"></i>首页
</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i></i>前端
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>文档教程</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/web/docs/imooc/wiki/" class="nav-link"><i class="iconfont reco-blog"></i>慕课教程
</a></li><li class="dropdown-subitem"><a href="/web/docs/es6/" class="nav-link"><i class="iconfont reco-blog"></i>ES6 入门教程
</a></li><li class="dropdown-subitem"><a href="/web/docs/wangdoc/javascript/" class="nav-link"><i class="iconfont reco-blog"></i>网道-JavaScript 教程
</a></li><li class="dropdown-subitem"><a href="/web/docs/angular/" class="nav-link"><i class="iconfont reco-blog"></i>Angular 文档
</a></li><li class="dropdown-subitem"><a href="/web/docs/react/" class="nav-link"><i class="iconfont reco-blog"></i>React 文档
</a></li><li class="dropdown-subitem"><a href="/web/docs/vue/" class="nav-link"><i class="iconfont reco-blog"></i>Vue 文档
</a></li><li class="dropdown-subitem"><a href="/web/docs/node/" class="nav-link"><i class="iconfont reco-blog"></i>Node 文档
</a></li><li class="dropdown-subitem"><a href="/web/docs/babel/" class="nav-link"><i class="iconfont reco-blog"></i>Babel 文档
</a></li><li class="dropdown-subitem"><a href="/web/docs/webpack/" class="nav-link"><i class="iconfont reco-blog"></i>Webpack 文档
</a></li><li class="dropdown-subitem"><a href="/web/docs/typescript/" class="nav-link"><i class="iconfont reco-blog"></i>TypeScript 文档
</a></li><li class="dropdown-subitem"><a href="/web/docs/runoob/" class="nav-link"><i class="iconfont reco-blog"></i>菜鸟教程
</a></li><li class="dropdown-subitem"><a href="/web/docs/docschina/" class="nav-link"><i class="iconfont reco-blog"></i>印记中文
</a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-api"></i>索引
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/categories/" class="nav-link"><i class="iconfont reco-category"></i>分类
</a></li><li class="dropdown-item"><!----> <a href="/tags/" class="nav-link"><i class="iconfont reco-tag"></i>标签
</a></li><li class="dropdown-item"><!----> <a href="/archives/" class="nav-link"><i class="iconfont reco-date"></i>归档
</a></li></ul></div></div><div class="nav-item"><a href="/bookshop/message-board/" class="nav-link"><i class="iconfont reco-suggestion"></i>留言板
</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-message"></i>关于
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>联系</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://github.com/alexwjj" target="_blank" rel="noopener noreferrer" class="nav-link external"><i class="iconfont reco-github"></i>GitHub
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="/bookshop/linkme/" class="nav-link"><i class="iconfont reco-account"></i>关于我
</a></li></ul></li><li class="dropdown-item"><h4>博客</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://github.com/alexwjj/alexwjj.github.io" target="_blank" rel="noopener noreferrer" class="nav-link external"><i class="iconfont reco-document"></i>本站源码
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://alexwjj.github.io/old-blog" target="_blank" rel="noopener noreferrer" class="nav-link external"><i class="iconfont reco-document"></i>老版博客
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li><li class="dropdown-item"><h4>其他</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/bookshop/friendslink/" class="nav-link"><i class="iconfont reco-friend"></i>友情链接
</a></li></ul></li></ul></div></div> <!----></nav></div></header> <div class="sidebar-mask" data-v-f848d4e8></div> <aside class="sidebar" data-v-f848d4e8><div class="personal-info-wrapper" data-v-34faaed8 data-v-f848d4e8><img src="/img/logo.png" alt="author-avatar" class="personal-img" data-v-34faaed8> <div class="author" data-v-34faaed8>
    俊劫
  </div> <div class="personal-info-details" data-v-34faaed8><div data-v-34faaed8>文章：<span data-v-34faaed8>54</span></div> <div data-v-34faaed8>地点：<span data-v-34faaed8>canton</span></div></div> <div class="slogan" data-v-34faaed8>
    just do it
  </div> <!----></div> <nav class="nav-links"><div class="nav-item"><a href="/" class="nav-link"><i class="iconfont reco-home"></i>首页
</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i></i>前端
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>文档教程</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/web/docs/imooc/wiki/" class="nav-link"><i class="iconfont reco-blog"></i>慕课教程
</a></li><li class="dropdown-subitem"><a href="/web/docs/es6/" class="nav-link"><i class="iconfont reco-blog"></i>ES6 入门教程
</a></li><li class="dropdown-subitem"><a href="/web/docs/wangdoc/javascript/" class="nav-link"><i class="iconfont reco-blog"></i>网道-JavaScript 教程
</a></li><li class="dropdown-subitem"><a href="/web/docs/angular/" class="nav-link"><i class="iconfont reco-blog"></i>Angular 文档
</a></li><li class="dropdown-subitem"><a href="/web/docs/react/" class="nav-link"><i class="iconfont reco-blog"></i>React 文档
</a></li><li class="dropdown-subitem"><a href="/web/docs/vue/" class="nav-link"><i class="iconfont reco-blog"></i>Vue 文档
</a></li><li class="dropdown-subitem"><a href="/web/docs/node/" class="nav-link"><i class="iconfont reco-blog"></i>Node 文档
</a></li><li class="dropdown-subitem"><a href="/web/docs/babel/" class="nav-link"><i class="iconfont reco-blog"></i>Babel 文档
</a></li><li class="dropdown-subitem"><a href="/web/docs/webpack/" class="nav-link"><i class="iconfont reco-blog"></i>Webpack 文档
</a></li><li class="dropdown-subitem"><a href="/web/docs/typescript/" class="nav-link"><i class="iconfont reco-blog"></i>TypeScript 文档
</a></li><li class="dropdown-subitem"><a href="/web/docs/runoob/" class="nav-link"><i class="iconfont reco-blog"></i>菜鸟教程
</a></li><li class="dropdown-subitem"><a href="/web/docs/docschina/" class="nav-link"><i class="iconfont reco-blog"></i>印记中文
</a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-api"></i>索引
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/categories/" class="nav-link"><i class="iconfont reco-category"></i>分类
</a></li><li class="dropdown-item"><!----> <a href="/tags/" class="nav-link"><i class="iconfont reco-tag"></i>标签
</a></li><li class="dropdown-item"><!----> <a href="/archives/" class="nav-link"><i class="iconfont reco-date"></i>归档
</a></li></ul></div></div><div class="nav-item"><a href="/bookshop/message-board/" class="nav-link"><i class="iconfont reco-suggestion"></i>留言板
</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-message"></i>关于
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>联系</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://github.com/alexwjj" target="_blank" rel="noopener noreferrer" class="nav-link external"><i class="iconfont reco-github"></i>GitHub
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="/bookshop/linkme/" class="nav-link"><i class="iconfont reco-account"></i>关于我
</a></li></ul></li><li class="dropdown-item"><h4>博客</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://github.com/alexwjj/alexwjj.github.io" target="_blank" rel="noopener noreferrer" class="nav-link external"><i class="iconfont reco-document"></i>本站源码
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://alexwjj.github.io/old-blog" target="_blank" rel="noopener noreferrer" class="nav-link external"><i class="iconfont reco-document"></i>老版博客
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li><li class="dropdown-item"><h4>其他</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/bookshop/friendslink/" class="nav-link"><i class="iconfont reco-friend"></i>友情链接
</a></li></ul></li></ul></div></div> <!----></nav> <ul class="sidebar-links"><li><a href="/pages/05c534dbae294/" class="sidebar-link">从零搭建服务器</a></li><li><a href="/pages/49e2a780662e9/" class="sidebar-link">拯救你的年底KPI：前端性能优化</a></li><li><a href="/pages/1736b20fa8753/" class="sidebar-link">文件流的转换与下载</a></li><li><a href="/pages/c863681e7285f/" class="sidebar-link">移动端适配</a></li><li><a href="/pages/dc00f73d9d1d9/" class="sidebar-link">Egg + Puppeteer 实现Html转PDF</a></li><li><a href="/pages/1e3e7c3cb310f/" aria-current="page" class="active sidebar-link">web打印，一篇搞定</a></li><li><a href="/pages/8c4ef214c7886/" class="sidebar-link">VuePress + Travis CI + Github Pages搭建个人博客</a></li><li><a href="/bookshop/message-board/" class="sidebar-link">留言板</a></li></ul> </aside> <div><main class="page"><div class="theme-vdoing-wrapper bg-style-2"><div class="articleInfo-wrap" data-v-13f19dad><div class="articleInfo" data-v-13f19dad><ul class="breadcrumbs" data-v-13f19dad><li data-v-13f19dad><a href="/" title="首页" class="fa fa-laptop-house router-link-active" data-v-13f19dad></a></li> <li data-v-13f19dad><a href="/categories/?category=%E5%85%B6%E4%BB%96" title="分类" data-v-13f19dad>其他</a></li> <!----> <!----></ul> <div class="info" data-v-13f19dad><div title="作者" class="author fa fa-user" data-v-13f19dad><a href="javascript:;" data-v-13f19dad>俊劫</a></div> <div title="创建时间" class="date fa fa-calendar-alt" data-v-13f19dad><a href="javascript:;" data-v-13f19dad>2020/11/05 00:00:00</a></div> <!----></div></div></div> <!----> <div class="content-wrapper"><div class="right-menu-wrapper"><div class="right-menu-margin"><div class="right-menu-content"></div></div></div> <h1><img src="">
            web打印，一篇搞定
          </h1> <div class="theme-vdoing-content content__default"><blockquote><p>对一个前端来说，没被打印折磨过的，你是最最幸福的😭。对于我现在的中后台业务来讲，不同的浏览器兼容性，不同的业务场景，不同的设备调试，每次都要浪费巨多的时间😭。</p></blockquote> <blockquote><p>针对个人遇到的，以及现有的一些方案对比，总结一波😎（文末有PPT版本，需要留言），希望能帮助同样头疼的你</p></blockquote> <h2 id="_1-浏览器打印"><a href="#_1-浏览器打印" class="header-anchor">#</a> 1.浏览器打印</h2> <h3 id="优缺点"><a href="#优缺点" class="header-anchor">#</a> 优缺点</h3> <p>通过 <code>window.print() 、document.execCommand('print’)</code> 调用浏览器打印</p> <p>不同浏览器的区别：在Safari和Chrome都会弹起打印预览的窗口，FireFox和 IE 没有预览而是直接让你选择打印机</p> <p>但是直接使用浏览器打印虽然省事，但是存在很多问题，无法满足我们的打印需求：</p> <ul><li>1、打印的是整个网页，不能打印局部内容；</li> <li>2、打印不支持自定义分页行为，默认不支持批量打印；</li> <li>3、打印的时候样式有问题，所见非所得；</li> <li>4、打印可以准确识别的样式单位是绝对单位（如pt、mm、cm），对相对单位识别不同打印机可能会得到意想不到的结果；</li></ul> <h3 id="问题来了-如何实现局部打印-🤔"><a href="#问题来了-如何实现局部打印-🤔" class="header-anchor">#</a> 问题来了：如何实现局部打印？🤔</h3> <h4 id="_1-简单粗暴-在你不需要考虑体验-项目里面用的也比较少时-可以试试看😆"><a href="#_1-简单粗暴-在你不需要考虑体验-项目里面用的也比较少时-可以试试看😆" class="header-anchor">#</a> （1）简单粗暴，在你不需要考虑体验，项目里面用的也比较少时，可以试试看😆</h4> <div class="language- line-numbers-mode"><pre class="language-text"><code>function innerHtmlPrint(){
    // 缓存页面内容
    const bodyHtml = window.document.body.innerHTML;
    // 获取要打印的dom
    const printContentHtml = document.getElementById(&quot;print&quot;).innerHTML;
    // 替换页面内容
    window.document.body.innerHTML = printContentHtml;
    // 全局打印
    window.print();
    // 还原页面内容
    window.document.body.innerHTML = bodyHtml;
}
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><h4 id="_2-iframe-稍微复杂点-需要将打印的内容添加到iframe里-然后打印整个iframe-需要注意-往iframe里写一些样式的时候-一些checkbox-radio要特殊处理。"><a href="#_2-iframe-稍微复杂点-需要将打印的内容添加到iframe里-然后打印整个iframe-需要注意-往iframe里写一些样式的时候-一些checkbox-radio要特殊处理。" class="header-anchor">#</a> （2）iframe，稍微复杂点，需要将打印的内容添加到iframe里，然后打印整个iframe，需要注意：往iframe里写一些样式的时候，一些checkbox，radio要特殊处理。</h4> <p>这里我把项目中用到的iframe局部打印抽出来了，各位可以直接npm使用 <a href="https://github.com/alexwjj/vue-iframe-print" target="_blank" rel="noopener noreferrer">vue-iframe-print<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> https://github.com/alexwjj/vue-iframe-print  😎😎😎</p> <p>如果你是vue项目，只需要安装后，在需要打印的dom上加上 v-print即可，主要实现路径如下（样式部分省略）：</p> <ul><li>创建iframe</li> <li>构建iframe docTyp、 head信息</li> <li>获取局部dom，插入iframe</li> <li>window.print()</li></ul> <div class="language- line-numbers-mode"><pre class="language-text"><code>   function onIframePrint(printId) {
      const printContentHtml = document.getElementById(&quot;printId&quot;).innerHTML;
      const iframe = document.createElement(&quot;iframe&quot;);
      iframe.setAttribute(
        &quot;style&quot;,
        &quot;position:absolute;width:0px;height:0px;left:-500px;top:-500px;&quot;
      );
      document.body.appendChild(iframe);
      iframe.contentDocument.write(printContentHtml);
      iframe.contentDocument.close();
      iframe.contentWindow.print();
      document.body.removeChild(iframe);
    },

</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><h3 id="_3-将打印内容转为图片"><a href="#_3-将打印内容转为图片" class="header-anchor">#</a> （3）将打印内容转为图片</h3> <blockquote><p>一倍清晰度模糊，可以用2倍canvas。缺点：pdf需要下载，有的产品需求需要一键打印。html2canvas不支持ie，兼容性也是个问题</p></blockquote> <div class="language- line-numbers-mode"><pre class="language-text"><code>function print() {
  var target = document.getElementsByClassName(&quot;right-aside&quot;)[0];
  target.style.background = &quot;#FFFFFF&quot;;

  html2canvas(target, {
    onrendered:function(canvas) {
        var contentWidth = canvas.width;
        var contentHeight = canvas.height;

    //一页pdf显示html页面生成的canvas高度;
    var pageHeight = contentWidth / 592.28 * 841.89;
    //未生成pdf的html页面高度
    var leftHeight = contentHeight;
    //页面偏移
    var position = 0;
    //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
    var imgWidth = 595.28;
    var imgHeight = 592.28/contentWidth * contentHeight;

    var pageData = canvas.toDataURL('image/jpeg', 1.0);

    var pdf = new jsPDF('', 'pt', 'a4');

    //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
    //当内容未超过pdf一页显示的范围，无需分页
    if (leftHeight &lt; pageHeight) {
    pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight );
    } else {
        while(leftHeight &gt; 0) {
            pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
            leftHeight -= pageHeight;
            position -= 841.89;
            //避免添加空白页
            if(leftHeight &gt; 0) {
              pdf.addPage();
            }
        }
    }

    pdf.save(&quot;content.pdf&quot;);
}
  })
}
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br></div></div><h3 id="pdf转成图片-会失真-打印一定程度上会模糊-如果用的是针式打印机-打出来的东西基本不能看。👿"><a href="#pdf转成图片-会失真-打印一定程度上会模糊-如果用的是针式打印机-打出来的东西基本不能看。👿" class="header-anchor">#</a> pdf转成图片，会失真，打印一定程度上会模糊，如果用的是针式打印机，打出来的东西基本不能看。👿</h3> <p>也是想了很久找的的解决办法（完美还原）：😬😬😬</p> <div class="language- line-numbers-mode"><pre class="language-text"><code>  &lt;object
    type=&quot;application/pdf&quot;
    data=&quot;./滴滴出行行程报销单A.pdf&quot;
    width=&quot;100%&quot;
    height=&quot;700&quot;
  &gt;&lt;/object&gt;
  
  &lt;embed 
     type=&quot;application/pdf&quot; 
     src=&quot;./滴滴出行行程报销单A.pdf&quot; 
     width=&quot;100%&quot; 
     height=&quot;700px&quot;
  /&gt;
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2cfc29a3f12e478cbb4c7dec90c6ff38~tplv-k3u1fbpfcp-zoom-1.image" alt=""></p> <h2 id="_2-插件打印"><a href="#_2-插件打印" class="header-anchor">#</a> 2.插件打印</h2> <p>一般是通过项目里面嵌入脚本，或者安装本地插件来完成，优缺点也都很明显</p> <p><strong>优点：</strong></p> <p>1、功能强大，可以调用到系统底层的东西，比如获取系统打印机列表，设置默认打印机等</p> <p>2、可以实现无预览打印</p> <p><strong>缺点：</strong></p> <p>1、需要安装客户端，大多收费</p> <p>2、第三方插件，无技术支持，出现问题难以解决（版本问题，chrome84升级导致的证书问题）</p> <p>3、本地插件的方式基本只有window系统版本</p> <p>我们项目目前在使用的插件是C-lodop，收费，现在用的<strong>注册码</strong>也不知道是<strong>谁</strong>在<strong>那</strong>搞得 🌚。</p> <p>如果失效，意味着我们项目的所有打印基本废了。目前来看，好像是一次购买永久有效的，<strong>先不慌</strong> 🌚</p> <p>这里列出几个插，仅供参考：</p> <p><a href="http://www.c-lodop.com/index.html" target="_blank" rel="noopener noreferrer">C-lodop<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>：功能强大，兼容性不是很好，你想在保证清晰度的情况下，没办法写css3，画个圆角边框都不行🤧🤧🤧，依赖于系统IE版本，IE9以下，打出来的东西乱七八糟。。。建议使用之前，仔细研究下官网给的demo，这个插件的原理是，在页面嵌入一段js，和本地客户端通过webscoket进行通信</p> <p><a href="http://www.httpprinter.com/" target="_blank" rel="noopener noreferrer">HttpPrinter<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>：和C-lodop差不多，可以去了解下</p> <p><a href="http://hiprint.io/" target="_blank" rel="noopener noreferrer">HiPrint<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>：不需要安装客户端，但是没有npm包，依赖于jQuery</p> <h3 id="打个嘴炮-😈😈😈"><a href="#打个嘴炮-😈😈😈" class="header-anchor">#</a> 打个嘴炮 😈😈😈</h3> <p>其实，大家要是有时间，可以自己用nw.js和electron.js自己撸一个，这位大佬自己就搞了一个：<a href="https://juejin.im/post/6844903778827649032" target="_blank" rel="noopener noreferrer">如何通过Nw.js纯前端实现调用热敏打印机打印小票？<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h2 id="_3-打印样式"><a href="#_3-打印样式" class="header-anchor">#</a> 3.打印样式</h2> <h3 id="先看下基本的页面模型"><a href="#先看下基本的页面模型" class="header-anchor">#</a> 先看下基本的页面模型</h3> <p><img src="https://user-gold-cdn.xitu.io/2019/12/16/16f0d84fc49433c9?w=267&amp;h=266&amp;f=png&amp;s=36609" alt=""></p> <h3 id="media-print"><a href="#media-print" class="header-anchor">#</a> @media print</h3> <p><code>可以控制打印时的样式，仅在打印生效，可以实现一些特殊需求。</code> <img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5fbe1b531f734ebaafc07133cc9e6e00~tplv-k3u1fbpfcp-zoom-1.image" alt=""></p> <h3 id="page"><a href="#page" class="header-anchor">#</a> @page</h3> <p><code>设置页面大小（A3，A4，A5）、边距（margin）、方向（ auto、landscape、portrait）等。</code> <img src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/830b907d14694d419ba79c0ab0147844~tplv-k3u1fbpfcp-zoom-1.image" alt=""> <img src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0150e4841c2f4d059b8cf9abec53b4e4~tplv-k3u1fbpfcp-zoom-1.image" alt=""></p> <h3 id="page-break-xxx-划重点"><a href="#page-break-xxx-划重点" class="header-anchor">#</a> page-break-xxx（划重点）</h3> <p><img src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8bc91383478441b9904f5b4683ba8acb~tplv-k3u1fbpfcp-zoom-1.image" alt=""></p> <div class="language- line-numbers-mode"><pre class="language-text"><code>page-break-before( after ) 用于设置元素前( 后 )的分页行为,可取值:

   * auto默认值。如果必要则在元素前插入分页符。
   * always在元素前插入分页符。
   * avoid避免在元素前插入分页符。
   * left在元素之前足够的分页符，一直到一张空白的左页为止。
   * right在元素之前足够的分页符，一直到一张空白的右页为止。
   * inherit规定应该从父元素继承 page-break-before 属性的设置。

page-break-inside设置元素内部的分页行为。取值如下:

   * auto默认。如果必要则在元素内部插入分页符。
   * avoid避免在元素内部插入分页符。
   * inherit规定应该从父元素继承 page-break-inside 属性的设置。
 
orphans设置当元素内部发生分页时必须在页面底部保留的最少行数。

widows设置当元素内部发生分页时必须在页面顶部保留的最少行数。
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br></div></div><h2 id="_4-云打印-node-ipp"><a href="#_4-云打印-node-ipp" class="header-anchor">#</a> 4.云打印（node + ipp）</h2> <h3 id="先科普下打印机类型-🤔🤔🤔"><a href="#先科普下打印机类型-🤔🤔🤔" class="header-anchor">#</a> 先科普下打印机类型 🤔🤔🤔</h3> <p><img src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/53fbb27706954d09b24c2f4041c7b9b1~tplv-k3u1fbpfcp-zoom-1.image" alt=""> <strong>激光打印机</strong>，办公室常见的打印机，一般用打印普通文档材料。利用激光加热将墨粉固定在纸上，从而实现打印功能。平常的耗材是墨粉，使用的纸张是普通纸，一般是打印黑白色。打印速度快 后期耗材便宜
<img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3444427bf38f418a8dd2bae70c3fdd2f~tplv-k3u1fbpfcp-zoom-1.image" alt=""> <strong>针式打印机</strong>，一般用于打印票据，或者需要按压打印的纸张。将色带上的墨水压在纸上，从而实现打印功能。平常的耗材是色带，使用的纸张是多联纸，比起其他两个分类针式打印机可以说是元老级别的，它是是市场上较早出现的种类。主要有9针、24针、72针、144针等多种针式打印机。其特点比较鲜明结构简单、技术成熟、性能价格比好、消耗费用低。
<img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2b6911600862494bbbe084af53c3aab2~tplv-k3u1fbpfcp-zoom-1.image" alt=""> <strong>热敏打印机</strong>，使用专用纸张,靠高温显示需要打印的信息.主要用于打印小票.
<img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/24f08ca94c244fffbefc96b04fefd96d~tplv-k3u1fbpfcp-zoom-1.image" alt=""> <strong>喷墨打印机</strong>，一般用于打印彩色材料。将墨水喷射在纸上，从而实现打印功能。平常的耗材是墨水，使用的纸张是普通纸，一般可以打印彩色。（另外也有一个耗材是墨盒，有些机型不必频繁更换）</p> <h3 id="node-ipp"><a href="#node-ipp" class="header-anchor">#</a> node + ipp</h3> <h4 id="先了解下两个前缀概念-🤔🤔🤔"><a href="#先了解下两个前缀概念-🤔🤔🤔" class="header-anchor">#</a> 先了解下两个前缀概念：🤔🤔🤔</h4> <p><strong>互联网打印协议</strong> （IPP；Internet Printing Protocol）是一个在互联网上打印的标准网络协议，它容许用户可以透过互联网作遥距打印及管理打印工作等工作。用户可以透过相关界面来控制打印品所使用的纸张种类、分辨率等各种参数。</p> <p><strong>无头浏览器</strong> 指的是我们使用脚本来执行以上过程的浏览器，能模拟真实的浏览器使用场景。
Puppeteer: <a href="https://juejin.im/post/6844903504276881422" target="_blank" rel="noopener noreferrer">无头浏览器 Puppeteer 初探 - 蚂蚁金服<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h3 id="云打印流程图"><a href="#云打印流程图" class="header-anchor">#</a> 云打印流程图</h3> <p><img src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/00a7035e0ea8479fabdcda93b0cfc7f3~tplv-k3u1fbpfcp-zoom-1.image" alt=""></p> <h3 id="目前我们组的云打印已经落地-但是存在诸多限制-使用的还不多-源码暂无开放-如有需要的同学-留言-抽空抽一下🙄🙄🙄"><a href="#目前我们组的云打印已经落地-但是存在诸多限制-使用的还不多-源码暂无开放-如有需要的同学-留言-抽空抽一下🙄🙄🙄" class="header-anchor">#</a> 目前我们组的云打印已经落地，但是存在诸多限制，使用的还不多，源码暂无开放，如有需要的同学，留言，抽空抽一下🙄🙄🙄</h3> <h2 id="_5-一些思考"><a href="#_5-一些思考" class="header-anchor">#</a> 5.一些思考</h2> <p>1.无特殊要求的还是建议使用window.print()   局部打印可以使用我写的插件 <a href="https://github.com/alexwjj/vue-iframe-print" target="_blank" rel="noopener noreferrer">vue-iframe-print<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> https://github.com/alexwjj/vue-iframe-print  😎😎😎</p> <p>2.看业务需求，如果是网络打印机，需要无痕打印，可以采用node+ipp的云打印，实现起来也不难。🕵</p> <p>3.后端给的源文件，要求不高可以用pdfjs转canvas，要求比较高用<code>&lt;object&gt;、&lt;embed&gt;</code>标签加载后端给的文件流，完美还原源文件清晰度</p> <p>4.<a href="https://github.com/coolwanglu/pdf2htmlEX" target="_blank" rel="noopener noreferrer">pdf2htmlEX插件<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>，pdf转html，4年前最后一次维护，可以尝试</p> <p>也查了很多资料，目前web打印这块感觉还是window.print比较实用，也没找到什么开源项目。哪位大佬有没有的，推荐一下的</p> <h2 id="参考资料"><a href="#参考资料" class="header-anchor">#</a> 参考资料：</h2> <ul><li><a href="https://juejin.im/post/6844903893038546957" target="_blank" rel="noopener noreferrer">由打印机TCP协议引起的网络通讯协议深入研究：从TCP到万能打印、云打印<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://juejin.im/post/6844903504276881422" target="_blank" rel="noopener noreferrer">无头浏览器 Puppeteer 初探<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://juejin.im/post/6844904164938498055" target="_blank" rel="noopener noreferrer">浏览器打印方案调研<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://zhuanlan.zhihu.com/p/83068956" target="_blank" rel="noopener noreferrer">前端一键打印解决方案<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://www.zhihu.com/question/20249686" target="_blank" rel="noopener noreferrer">PDF 能转成 HTML 吗？如何转换？<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <h2 id="ppt截图-如有需要-可发邮箱"><a href="#ppt截图-如有需要-可发邮箱" class="header-anchor">#</a> PPT截图，如有需要，可发邮箱</h2> <p><img src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/82889f7336c94a42b7e388a3e9ca6d42~tplv-k3u1fbpfcp-zoom-1.image" alt=""> <img src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c917e05af46e46da93451eb3614a72a5~tplv-k3u1fbpfcp-zoom-1.image" alt="">
有兴趣的可以看下我的个人博客：http://alexwjj.online/  😎😎😎</p></div></div> <div class="page-edit"><div class="tags"><a href="/tags/?tag=%E6%89%93%E5%8D%B0" title="标签">#打印</a></div> <div class="last-updated"><span class="prefix">最近更新时间：</span> <span class="time">2021/05/01 17:06:28</span></div></div> <div class="page-nav-wapper"><div class="page-nav-centre-wrap"><a href="/pages/dc00f73d9d1d9/" class="page-nav-centre page-nav-centre-prev"><div class="tooltip">Egg + Puppeteer 实现Html转PDF</div></a> <a href="/pages/8c4ef214c7886/" class="page-nav-centre page-nav-centre-next"><div class="tooltip">VuePress + Travis CI + Github Pages搭建个人博客</div></a></div> <div class="page-nav"><p class="inner"><span class="prev">
        ←
        <a href="/pages/dc00f73d9d1d9/" class="prev">Egg + Puppeteer 实现Html转PDF</a></span> <span class="next"><a href="/pages/8c4ef214c7886/">VuePress + Travis CI + Github Pages搭建个人博客</a>→
      </span></p></div></div></div> <div class="theme-vdoing-wrapper article-list bg-style-6"><div class="article-title"><a href="/archives/" class="fa fa-pencil-alt">
      最近更新
    </a></div> <div class="article-wrapper"><dl><dd>01</dd> <dt><div><a href="/pages/512f6ae339a31/"><div>【TypesScript主题月】5.7</div></a></div> <div class="date"><span>2021/05/06 00:00:00</span></div></dt></dl><dl><dd>02</dd> <dt><div><a href="/pages/136f8f068dffe/"><div>【React主题月】4月完结</div></a></div> <div class="date"><span>2021/04/30 00:00:00</span></div></dt></dl><dl><dd>03</dd> <dt><div><a href="/pages/55e7bb3eb7802/"><div>【算法打卡】先来一个波集合</div></a></div> <div class="date"><span>2021/04/22 00:00:00</span></div></dt></dl> <div class="more-box"><a href="/archives/" class="more"><i class="fas fa-angle-double-right"></i>前往更多 ...
      </a></div></div></div> <div class="comments-wrapper" style="display:none;"><!----></div></main></div> <div class="footer-wrapper" data-v-51417878 data-v-51417878><span class="footer-reco-theme" data-v-51417878><i class="iconfont reco-github" data-v-51417878></i> <a target="blank" href="https://github.com/alexwjj/alexwjj.github.io" data-v-51417878>alexwjj.github.io@5.0</a></span> <!----> <span class="footer-copyright" data-v-51417878><i class="iconfont reco-copyright" data-v-51417878></i> <a data-v-51417878><span data-v-51417878>俊劫</span> <span class="ml5" data-v-51417878>
          2018 - 2021
        </span></a></span> <span class="footer-view-site" data-v-51417878><i class="iconfont reco-eye" data-v-51417878></i> <span id="busuanzi_container_site_uv" data-v-51417878>
        访客数：<span id="busuanzi_value_site_uv" class="num" data-v-51417878>-</span></span> <span id="busuanzi_container_site_pv" class="ml5" data-v-51417878>
        访问量：<span id="busuanzi_value_site_pv" class="num" data-v-51417878>-</span></span></span> <!----></div> <!----></div></div><div class="global-ui"><div class="back-to-ceiling" style="right:1rem;bottom:6rem;width:2.5rem;height:2.5rem;border-radius:.25rem;line-height:2.5rem;display:none;" data-v-c6073ba8 data-v-c6073ba8><svg t="1574745035067" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5404" class="icon" data-v-c6073ba8><path d="M526.60727968 10.90185116a27.675 27.675 0 0 0-29.21455937 0c-131.36607665 82.28402758-218.69155461 228.01873535-218.69155402 394.07834331a462.20625001 462.20625001 0 0 0 5.36959153 69.94390903c1.00431239 6.55289093-0.34802892 13.13561351-3.76865779 18.80351572-32.63518765 54.11355614-51.75690182 118.55860487-51.7569018 187.94566865a371.06718723 371.06718723 0 0 0 11.50484808 91.98906777c6.53300375 25.50556257 41.68394495 28.14064038 52.69160883 4.22606766 17.37162448-37.73630017 42.14135425-72.50938081 72.80769204-103.21549295 2.18761121 3.04276886 4.15646224 6.24463696 6.40373557 9.22774369a1871.4375 1871.4375 0 0 0 140.04691725 5.34970492 1866.36093723 1866.36093723 0 0 0 140.04691723-5.34970492c2.24727335-2.98310674 4.21612437-6.18497483 6.3937923-9.2178004 30.66633723 30.70611158 55.4360664 65.4791928 72.80769147 103.21549355 11.00766384 23.91457269 46.15860503 21.27949489 52.69160879-4.22606768a371.15156223 371.15156223 0 0 0 11.514792-91.99901164c0-69.36717486-19.13165746-133.82216804-51.75690182-187.92578088-3.42062944-5.66790279-4.76302748-12.26056868-3.76865837-18.80351632a462.20625001 462.20625001 0 0 0 5.36959269-69.943909c-0.00994388-166.08943902-87.32547796-311.81420293-218.6915546-394.09823051zM605.93803103 357.87693858a93.93749974 93.93749974 0 1 1-187.89594924 6.1e-7 93.93749974 93.93749974 0 0 1 187.89594924-6.1e-7z" p-id="5405" data-v-c6073ba8></path><path d="M429.50777625 765.63860547C429.50777625 803.39355007 466.44236686 1000.39046097 512.00932183 1000.39046097c45.56695499 0 82.4922232-197.00623328 82.5015456-234.7518555 0-37.75494459-36.9345906-68.35043303-82.4922232-68.34111062-45.57627738-0.00932239-82.52019037 30.59548842-82.51086798 68.34111062z" p-id="5406" data-v-c6073ba8></path></svg></div><!----><div></div></div></div>
    <script src="/assets/js/app.070ad525.js" defer></script><script src="/assets/js/2.1d15da37.js" defer></script><script src="/assets/js/67.2f070f74.js" defer></script><script src="/assets/js/4.aab0e518.js" defer></script>
  </body>
</html>
